<template>
  <el-page-header
    :icon="ArrowLeft"
    title="返回"
    class="page-header"
    @back="handleGo"
  >
    <template #content>
      <span class="text-large font-600 mr-3"> 推荐管理 </span>
    </template>
  </el-page-header>

  <div class="add-sell">
    <div class="text">
      <select name="details-sell" id="sell" @change="changeIndex($event)">
        <option v-for="(item, index) in list" :key="index" :value="item.id - 1">
          {{ item.meal }}
        </option>
      </select>
      <div class="good">
        <span>搭配1</span>
        <span><input type="text" v-model="good1" /></span>
      </div>
      <div class="good">
        <span>搭配2</span>
        <span><input type="text" v-model="good2" /></span>
      </div>
      <div class="good">
        <span>价格￥</span>
        <span><input type="text" v-model="price" /></span>
      </div>
      <div class="tr" @click="sellTr">保存</div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import "../../../mock/orderMock";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
let router = useRouter();
let handleGo = () => {
  router.go(-1);
};

// 获取推荐列表数据
let good1 = ref("");
let good2 = ref("");
let price = ref("");
let index = ref(0);
let list = ref();
onMounted(() => {
  list.value = JSON.parse(localStorage.getItem("meal_item")).melist;
  good1.value = list.value[index.value].good1;
  good2.value = list.value[index.value].good2;
  price.value = list.value[index.value].price;
});
// select标签获取option的value 通过绑定@change="$event",然后通过event.target.value获取
let changeIndex = (event) => {
  index.value = event.target.value;
  good1.value = list.value[index.value].good1;
  good2.value = list.value[index.value].good2;
  price.value = list.value[index.value].price;
};

// 修改推荐
let sellTr = () => {
  if (good1.value == false) {
    alert("请输入搭配1");
  } else if (good2.value == false) {
    alert("请输入搭配2");
  } else if (price.value == false) {
    alert("请输入价格");
  } else {
    axios
      .post("/api/meal/sell", {
        id: index.value / 1 + 1,
        good1: good1.value,
        good2: good2.value,
        price: price.value,
      })
      .then((res) => {
        console.log(res.data);
        alert("修改成功");
      });
  }
};
</script>

<style lang="scss" scoped>
.page-header {
  background: blanchedalmond;
  height: 85px;
  margin-top: -20px;
  padding-left: 20px;
  color: coral;
  .text-large {
    line-height: 85px;
    color: coral;
  }
}
.add-sell {
  display: flex;
  background: darkseagreen;
  height: 500px;
  .text {
    margin: 20px 400px;
    #sell {
      display: block;
      height: 35px;
      width: 170px;
      outline: none;
      border: none;
      border-radius: 10px;
      padding: 0 5px;
      color: darkmagenta;
      font-weight: bold;
      margin-left: 70px;
      margin-bottom: 90px;
      cursor: pointer;
      option {
        color: hotpink;
      }
    }
    .good {
      margin: 10px 0;
      display: flex;
      span:nth-child(1) {
        width: 60px;
      }
      span {
        height: 35px;
        display: block;
        line-height: 35px;
        color: gray;
        font-weight: bold;
        margin-right: 10px;
        input {
          display: block;
          height: 35px;
          border-radius: 10px;
          border: none;
          outline: none;
          padding-left: 10px;
          color: tan;
        }
      }
    }
    .tr {
      text-align: center;
      margin: 40px 100px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      border-radius: 10px;
      background: bisque;
      cursor: pointer;
      color: coral;
      font-weight: bold;
    }
  }
}
</style>
